<!-- Created by mhy on 2018/6/27.

 -->
<template>

  <div class="frame-index" style="background-color: #F2F2F2">
    <div class="frame-header">
      <img class="frame-logo" src="../../../static/PC_box_OneList.png" @click="changeStyle">
      <button class="frame-new" @click="newFrame()">+新建背景</button>
    </div>
    <div class="frame-content" >
      <div class="frame-left" id="leftContent">
        <form class="frame-left-search" action="#">
          <input class="frame-search-input" @keydown.enter="searchData" v-model="inputSearch" type="search" placeholder="搜索 名称/ID">
        </form>
        <div class="frame-left-dist"></div>
        <m-select v-model="value4" :options="options4" title="付费类型" class="m-mb-10" @change="changeSearch(4)"/>
        <m-select v-model="value5" :options="options5" title="状态" class="m-mb-10" @change="changeSearch(5)"/>
      </div>
      <div class="frame-right"  id="rightContent">
        <div class="frame-right-header">
          <p class="frame-right-title">搜索</p>
          <div class="frame-right-search"  v-show="inputSearch2.length > 0">
            <p class="frame-right-search-title">{{inputSearch2}}</p>
            <img class="" src="../../../static/deleteWord.png"  @click="research">
          </div>
          <p class="frame-right-search-content" v-for="(item,index) in searchList">{{item}}</p>
          <p class="frame-right-allitems">共{{bgCount}}张</p>
        </div>
        <div class="frame-right-list">
          <template v-for="(item,key) in bgList">
            <bg-item :key="key" @click.native="showDetail(item)" :item="item"></bg-item>
          </template>
        </div>
        <div class="frame-right-dist"></div>
        <div class="frame-right-footer">
          <p class="frame-right-footer-txt" @click="addPage">上一页</p>
          <p class="frame-right-footer-txt">{{pageIndex}} / {{Math.ceil(this.bgCount / this.pageSize)}}</p>
          <p class="frame-right-footer-txt" @click="minusPage">下一页</p>
          <input class="frame-right-page-input"  id="pageinput" type="text" onkeyup="value=value.replace(/[^\d]/g,'')">
          <p class="frame-right-footer-search"  @click="toPage">跳转</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import {mapActions,mapState} from 'vuex'
  import FrameItem from './../../components/frame/frameItem.vue'
    export default {
      data() {
        return{
          inputSearch:'',
          inputSearch2:'',
          searchList:[],
          value4: '0',
          value5: '0',
          options4: [{value: '0', label: '全部'},{value: '1', label: 'VIP'},{value: '2', label: '免费'}],
          options5:[{value: '0', label: '全部'},{value: '1', label: '上架'},{value: '2', label: '下架'}],
          pageIndex: 1,
          pageSize: 5,
        }
      },
      beforeRouteEnter(to, from, next) {
          next( (self) => {
            self.searchFrame()
            self.$store.state.navTitle = '背景库';
          })
      },
      components:{
      },
      methods: {
        ...mapActions([
            'getBgList'

        ]),
        searchData(e){
          this.inputSearch2 = this.inputSearch.trim()
          this.pageIndex = 1
          this.searchFrame()
          e.preventDefault()
        },
        research () {
          this.inputSearch = ''
          this.inputSearch2 = ''
          this.searchFrame()
        },
        newFrame() {
            this.$router.push('/background/new')
        },
        changeStyle(){
          let left = document.getElementById('leftContent');
          let right = document.getElementById('rightContent');
          let imgLogo = document.getElementsByClassName('frame-logo')[0];
          if (left.offsetWidth > 0){
            left.style.width = '0%'
            left.display = 'none'
            left.style.zIndex = -100
            right.style.width = '100%'
            imgLogo.src = 'http://test.51artx.com/dist/static/PC_box_TwoList.png'
          }else{
            left.display = ''
            left.style.zIndex = 1
            left.style.left = ''
            left.style.width = '30%'
            right.style.width = '70%'
            imgLogo.src = 'http://test.51artx.com/dist/static/PC_box_OneList.png'
          }
        },
        changeSearch(index){
          this.searchList.length = 0
          if(this.value4 != '0'){
            this.searchList.push(this.options4[Number(this.value4)].label)
          }
          if(this.value5 != '0'){
            this.searchList.push(this.options5[Number(this.value5)].label)
          }
          this.pageIndex = 1;
          this.searchFrame()
        },
        addPage(){
          if (this.pageIndex > 1){
            this.pageIndex -= 1
            this.searchFrame()
          }else{
            this.$dialog.toast({
              mes:'已经最小页了',
              timeout: 1000
            })
          }
        },
        minusPage() {
          if (this.pageIndex < Math.ceil(this.bgCount / this.pageSize)){
            this.pageIndex += 1
            this.searchFrame()
          }else{
            this.$dialog.toast({
              mes:'已经最大页了',
              timeout: 1000
            })
          }
        },
        toPage() {
          this.pageIndex = Number(document.getElementById('pageinput').value)
          this.searchFrame()
        },
        searchFrame() {
            console.log('111')
          let params = {action:"getlist",page:this.pageIndex,pagesize:this.pageSize};
          if(this.value4 != '0'){
            params["paytype"] = this.options4[Number(this.value4)].label
          }
          if(this.value5 != '0'){
            params["state"] = this.options5[Number(this.value5)].label
          }
          if(this.inputSearch2.length > 0){
            params['search'] = this.inputSearch2
          }
          this.getBgList(params);
        },
        showDetail(item){
          this.$router.push({
            path: '/background/detail',
            query: {
              id: item.id
            }
          })
        }
      },
      mounted () {
        this.$store.state.navTitle = '背景库';
      },
      computed: {
        ...mapState({
          bgList: state => state.material.bgList,
          bgCount: state => state.material.bgCount,
        })
      },
      mounted (){
          this.$store.state.navTitle = '背景库'
          let params = {action:"getlist",page:this.pageIndex,pagesize:this.pageSize};
          this.getBgList(params);
      }
    }
</script>

<style scoped>

  body{
    background-color: #F2F2F2;
  }
  input{
    background-color: white;
  }
  .m-mb-10{
    margin-top: 10px;
  }
  /*顶部*/
  .frame-header{
    width: 100%;
    height: 70px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
  }
  .frame-logo{
    width: 30px;
    height: 30px;
    margin-left: 3%;
  }
  .frame-new{
    border: 0;
    background-color: #39B866;
    width: 100px;
    height: 37px;
    border-radius: 3pt;
    color: white;
    font-size: 12px;
    -webkit-text-size-adjust:none;
    margin-right: 20px;
    outline: none;
  }

  /*内容*/
  .frame-content{
    width:100%;
    display: flex;
    display: -webkit-flex;
  }
  /*左边*/
  .frame-left{
    width: 30%;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
  }
  .frame-left-search{
    width: 80%;
    height: 40px;
  }
  .frame-search-input{
    width: 100%;
    height: 40px;
    border-radius: 50pt;
    border-width: 0;
    border-color: #C8C8C8;
    outline:none;
    padding: 10pt;
    font-size: 12px;
    background-color: white;

  }
  input::-ms-input-placeholder{
    text-align: center;
  }
  input::-webkit-input-placeholder{
    text-align: center;
  }
  .frame-left-dist{
    width: 80%;
    background-color: #C8C8C9;
    height: 1px;
    margin-top: 40px;
    margin-bottom: 20px;
  }

  .frame-left-category{
    margin:5pt;
    width: 80%;
    height: 25pt;
    background-color: white;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    border-width: 1pt;
    border-color: #C8C8C8;
  }
  .category-title{
    margin-left: 10pt;
    font-size: 7pt;
    color: #303641;
  }
  .category-value{
    margin-right: 10pt;
    font-size: 7pt;
  }


  /*右边*/
  .frame-right{
    width: 70%;
    /*height: 900pt;*/
    background-color: white;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .frame-right-dist{
    width: 90%;
    height: 2px;
    margin-top: 2px;
    background-color: #C8C8C9;
  }
  .frame-right-header{
    margin-top: 8px;
    height:72px;
    width: 90%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    flex-direction: row;
  }
  .frame-right-title{
    font-size: 6pt;
    color: #303641;
  }
  .frame-right-search{
    height: 30px;
    border-radius: 50pt;
    border:1pt solid #C8C7CC;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    padding-left: 5pt;
    padding-right: 5pt;
    margin-left: 10pt;
  }
  .frame-right-search-title{
    font-size: 6pt;
    color: #303641;
    margin-right: 10pt;
  }
  .frame-right-search-content{
    font-size: 6pt;
    margin-left: 10pt;
    color: #303641;
  }
  .frame-right-allitems{
    font-size: 6pt;
    margin-left: auto;
  }
  .frame-right-list{
    width: 90%;
    /*height: 1800px;*/
    /*background-color: aqua;*/
    margin-top: 10px;
  }
  .frame-right-footer{
    width: 90%;
    height: 100px;
    /*margin-bottom: 100px;*/
    /*margin-top: 20px;*/
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;
  }
  .frame-right-footer-txt{
    font-size: 7pt;
    color: #303641;
    margin-right: 10pt;
  }
  .frame-right-page-input{
    width: 80px;
    height:26px;
    line-height: 26px;
    outline: none;
    margin-right: 10pt;
  }
  .frame-right-footer-search{
    width: 50px;
    height:26px;
    line-height: 26px;
    font-size: 6pt;
    border: 1px solid #C8C8C8;
  }
</style>
